<script >
import axios from "axios";
export default {
  name: "UserPage",
  data() {
    return {
      user: null,
      queryId: null,
      userById: null,
      Id: null,
      username: null,
      telephone: null,
      qq: null,
      address:null,
      deleteId: null,
    }
  },
  methods: {
    getUsers() {
      axios.get("http://localhost:8081/informations")
          .then(resp => {
            console.log(resp);
            this.user = resp.data;
          })
    },
    getUserById() {
      axios.get(`http://localhost:8081/information/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.userById = resp.data;
          })
    },
    addUser() {
      axios.post("http://localhost:8081/information",
          {
            username: this.username,
            telephone: this.telephone,
            qq: this.qq,
            address:address,
          }).then(resp => {
        console.log(resp);
      })
    },
    updateUser() {
      axios.put("http://localhost:8081/information",
          {
            id: this.id,
            username: this.username,
            telephone: this.telephone,
            qq: this.qq,
            address:address,
          }).then(resp => {
        console.log(resp);
      })
    },
    deleteUser() {
      axios.delete(`http://localhost:8081/information/${this.deleteId}`)
          .then(resp => {
            console.log(resp);
          })
    }

  }
}

</script>
<template>
  <div>
    <button v-on:click="getUsers">获取</button>
    <div v-for="users in user" v-bind:key=users.id>
      {{users}}
    </div>
    <p></p>
    <div>请输入要查询的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getUserById">获取ID</button>
    <div>{{userById}}</div>
    <div>
      请输入要添加的信息:
      <div>
        <div>
          username
          <input v-model="username">
        </div>
        <div>
          telephone
          <input v-model="telephone">
        </div>
        <div>
          qq
          <input v-model="qq">
        </div>
        <div>
          address
          <input v-model="address">
        </div>
      </div>
      <button v-on:click="addUser">添加用户</button>
      <div>
        请输入要修改的信息:
        <div>
          id
          <input v-model="id">
        </div>
        <div>
          username
          <input v-model="username">
        </div>
        <div>
          telephone
          <input v-model="telephone">
        </div>
        <div>
          qq
          <input v-model="qq">
        </div>
        <div>
          address
          <input v-model="address">
        </div>
      </div>
      <button v-on:click="updateUser">修改信息</button>
      <p></p>
      <div>
        请输入删除用户id:
        <input v-model="deleteId">
        <div>
          <button v-on:click="deleteUser">删除用户</button>
        </div>
      </div>

    </div>
</template>

<style scoped>

</style>